import React, { Fragment } from 'react';
import { Table, Pagination, Card, Tag } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { history } from 'umi'
import Search from './Search';
import useDepartmentList from '../hooks/useDepartmentList';

const List = props => {
    const {
        location: { query, pathname }
    } = props;
    const [loading, dataSource, total] = useDepartmentList(query);
    const { pageNo = 1, pageSize = 10 } = query;
    const [sort, setStor] = React.useState();

    const color = {
        未评估: '',
        差: 'red',
        中: 'blue',
        优: 'green'
    };
    const columns = [
        {
            title: '部门',
            dataIndex: 'departmentName',
            key: 'departmentName'
        },
        {
            title: '员工/考核员工',
            dataIndex: 'evalPeopleNum',
            key: 'evalPeopleNum',
            render: (text, record) => `${record.totalPeopleNum}/${record.evalPeopleNum}`
        },
        {
            title: '考核率',
            dataIndex: 'employeeEvalRateStr',
            key: 'employeeEvalRateStr'
        },
        {
            title: '总任务/已完成/逾期',
            dataIndex: 'project',
            key: 'project',
            render: (text, record) => `${record.totalTaskNum}/${record.doneTaskNum}/${record.overdueTaskNum}`
        },
        {
            title: '计划人均/实际人均工作量',
            dataIndex: 'job',
            key: 'job',
            render: (text, record) => `${record.planPerCapitaStandardWorkloadNum}/${record.actualPerCapitaWorkloadNum}`
        },
        {
            title: '任务质量',
            dataIndex: 'taskNum',
            key: 'taskNum',
            sorter: true,
            sortOrder: sort,
            render: (text, record) => (
                <Fragment>
                    <span style={{ display: 'inline-block', width: 30, marginRight: 5 }}>{record.evalScore}</span>
                    <Tag color={color[record.rankName]}> {record.rankName}</Tag>
                </Fragment>
            )
        }
    ];

    /* 翻页 */
    const handlePageNoChange = React.useCallback(_pageNo => {
        history.push({ pathname, query: { ...query, pageNo: _pageNo } });
    }, []);

    const handlePageSizeChange = React.useCallback((_, _pageSize) => {
        history.push({ pathname, query: { ...query, pageNo: 1, pageSize: _pageSize } });
    }, []);

    const handleTableChange = React.useCallback((pagination, filters, sorter) => {
        console.log('===============================================>sorter', sorter);
        setStor(sorter.order);
    }, []);

    return (
        <PageHeaderWrapper>
            <Card>
                <div style={{ marginBottom: 24 }}>
                    <Search />
                </div>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                    loading={loading}
                    scroll={{ x: 'max-content' }}
                    onChange={handleTableChange}
                />
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 24 }}>
                    {total ? (
                        <Pagination
                            showTotal={_total => `总共 ${_total} 条`}
                            showSizeChanger
                            showQuickJumper
                            loading={loading}
                            total={total}
                            current={+pageNo}
                            pageSize={+pageSize}
                            onChange={handlePageNoChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    ) : null}
                </div>
            </Card>
        </PageHeaderWrapper>
    );
};

export default List;
